<template>
	<view class="box">
		<form @submit="formSubmit">
			<view class="uni-form-item">
				<!-- name为表单提交所需要的key -->
				<input name="username" type="text" placeholder="请输入手机号" />
			</view>
			<view class="uni-form-item">
				<input name="pwd" type="password" placeholder="请输入密码" />
			</view>
			<view class="btn-area">			
				<button formType="submit" type="primary">登录</button>
				<navigator url="./reg">
					<button type="primary">注册</button>
				</navigator>

			</view>
		</form>
	</view>
</template>

<script>
	var graceChecker = require("../../common/graceChecker.js");
	import {
		login
	} from '../../common/api.js'
	import {
		getUnionid
	} from '../../common/util.js'
	import {
		showError,
		showSuccess
	} from '../../common/fast.js'
	export default {
		data() {
			return {

			}
		},
		methods: {	
			formSubmit(e) {
				var rule = [{
						name: "username",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请填写用户名"
					},
					{
						name: "pwd",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入密码"
					},
				]
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					let reqData = {
						user_name: formData.username,
						user_password: formData.pwd,
						user_unionid: getUnionid()
					}
					login(reqData).then(res => {
						let resData = res.data
						if (resData.status === 'error') {
							showError(resData.msg)
						} else {
							showSuccess('登录成功')
							let userInfo = resData.result
							this.$store.commit('setUserInfo', userInfo)
							uni.reLaunch({
								url: '../tabBar/index/index'
							})
							console.log(this.$store.state.userInfo)
						}


					})
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			onLoad() {
				
			},
			onShow() {}
		}
	}
</script>

<style>
	.box {
		padding: 30px 15px 0px;
	}

	.uni-form-item {
		padding: 10upx 20upx;
		margin-bottom: 20upx;
		background-color: #F9F9F9;
	}

	.btn-area button {
		margin-bottom: 20upx;
	}
</style>
